<template>
    <div class="layout" style="padding:10px" >
        <Layout>
                <Breadcrumb>
                <BreadcrumbItem to="/">首页</BreadcrumbItem>
                <BreadcrumbItem to="/components/breadcrumb">菜单管理</BreadcrumbItem>
                <BreadcrumbItem>新增</BreadcrumbItem>
            </Breadcrumb>
            
            <Content style="padding:20px" @click.capture="handleClose">
                <Form ref="formInline" :model="sysMenu" @click.capture="handleClose" >
                    <FormItem prop="user" label="菜单名称">
                        <Input type="text" v-model="sysMenu.menuName" placeholder="请输入菜单名称">
                        </Input>
                    </FormItem>
                    <FormItem prop="user" label="选择父级菜单">
                        <Dropdown trigger="custom" :visible="showMenuSel" style="width:100%">
                            <!-- <Input type="text" style=""  @click.capture="handleOpen" v-model="parentMenuName"  placeholder="请选择父级菜单">
                            </Input> -->
                            <div class="menu-div" @click="handleOpen" v-text="parentMenuName"></div>
                            <!-- <a href="javascript:void(0)" @click="handleOpen">
                                custom 触发
                                <Icon type="ios-arrow-down"></Icon>
                            </a> -->
                            <DropdownMenu slot="list">
                                <DropdownItem>
                                    <Tree ref="tree" :data="menuList" 
                                    :load-data="loadData" 
                                    @on-select-change="selMenu"
                                    ></Tree>
                                </DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </FormItem>

                    <FormItem prop="user" label="菜单URL">
                       <Input type="text" v-model="sysMenu.menuUrl" placeholder="请输入菜单URL">
                        </Input>
                    </FormItem>
                    <FormItem prop="user" label="菜单图片">
                        <Input type="text" v-model="sysMenu.menuImg" placeholder="请输入菜单图片">
                        </Input>
                    </FormItem>
                    <FormItem prop="user" label="排序值">
                        <Input type="text" v-model="sysMenu.menuSeq" placeholder="请输入菜单排序值">
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="save" size='small' @click="save">保存</Button>
                        <Button type="primary" icon="arrow-back" size='small'  @click="back">返回</Button>
                    </FormItem>
                
                </Form>
            </Content>
        </Layout>
    </div>
</template>
<script>
export default {
  data(){
      return{
        showMenuSel:false,
        sysMenu:{
            menuId:this.$route.params.menuId,
            parentMenuId:'',
            menuName:'',
            menuUrl:'',
            menuImg:'',
            menuSeq:''
        },
        parentMenuName:'',
        menuList:[],
      }
  },
  created(){
      this.getMenu()
      this.getMenuInfo()
      //this.getDeptInfo()
  },
  methods:{
      handleOpen(){
          this.$Message.info('open')
          this.showMenuSel = true
      },
      handleClose(){
          this.$Message.info('close')
          this.showMenuSel = false
      },
      back(){
        this.$router.push({name:'menuList'});
      },
      selMenu(nodes){
        //console.log(nodes)
        this.sysMenu.parentMenuId = nodes[0].id
        this.parentMenuName = nodes[0].name  
        this.showMenuSel = false
      },
      loadData(item, callback){
        this.getMenuInfo(item.id,callback)
      },
      save(){
        this.$post('sys/menuSave',this.sysMenu,'',false)
        .then(res=>{
            if(res.success){
                this.$Message.info('保存成功')
                setTimeout(()=>{
                    this.$router.push({name:'menuList'});
                },1500)
                
            }
        })
      },
      hideDept(){
          if(this.showMenuSel){
            this.showMenuSel = false
          }
      },
      treeClick(){
        this.$Message.info('tree--click')
        this.showMenuSel = true
      },
      selectParentMenu(){
          this.$Message.info('tree--')
          this.showMenuSel = true
          //console.log('showDeptSel',this.showDeptSel)
      },
      getMenuInfo(id,callback){
        this.$fetch('sys/menuTree',{
            id
        })
        .then(result=>{
            //console.log('dept res',result)
            if(result.success){
                if(callback){
                  callback(result.treeList)
                } else {
                  this.menuList = result.treeList
                }
            }
        })
      },
      getMenu(){
        this.$Message.info('获取 数据')
        this.$fetch('sys/menuEdit',{
            menuId:this.sysMenu.menuId
        })
        .then(result=>{
            console.log('edit result',result)
            if(result.success){
                this.sysMenu = result.sysMenu
                this.parentMenuName = result.sysMenu.parentMenuName
            }
            
        })
      }
  }

}
</script>
<style scoped>

.treeDiv{
    position: absolute;;
    top:65px;
    width:100%;
    border:1px solid #ccc;
    border-top:none;
    background-color: #fff;
}
</style>


